<template>
    <view class="content">
        <view class="title">登录</view>
        <view class="sub">欢迎使用谊安商贸WMS客户端</view>
        <view class="item">
            <image src="../../static/icon/tel.png" class="icon"></image>
            <input type="text" v-model="name" placeholder="用户名" placeholder-class="p-inp" class="inp">
        </view>
        <view class="item">
            <image src="../../static/icon/pas.png" class="icon"></image>
            <input type="password" v-model="password" placeholder="密码" placeholder-class="p-inp" class="inp">
        </view>
        
        <view class="flex align-center margin-top u-m-b-80" @click="agree">
            <view class="frame" :class="act ? 'activeIcon' : ''">
                <u-icon name="checkbox-mark" color="#ff4800" size="30" v-if="act"></u-icon>
            </view>
            <view class="text-m text-gray">
                我已阅读并同意
                <text class="tip" @click="$gTo(`/pages/login/user-privacy`)">《用户使用条款和隐私声明》</text>
            </view>
        </view>
        
        <view class="btn-radius" @click="doLogin">立即登录</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                noClick:true,
                act: false,
                name: '',
                password: '',
            };
        },
        onLoad() {
            
        },
        methods: {
            agree() {
                this.act = !this.act
                console.log('act',this.act)
            },
            
            doLogin() {
                if (this.act == false) {
                    this.$toast('请先同意用户使用条款和隐私声明！');
                    return
                }
                if (!this.name) {
                    this.$toast('请输入用户名');
                    return false;
                }
                if (!this.password) {
                    this.$toast('请输入密码');
                    return false;
                }
                
                this.$ajax('index/login', {
                    username: this.name,
                    password: this.password, 
                }).then(ret => {
                    if (ret.status == 0) {
                        uni.$emit('LOGIN')
                        uni.setStorageSync('userToken', ret.data.token)
                        uni.setStorageSync('userInfo', ret.data)
                        uni.setStorageSync('userId', ret.data.id)
                        
                        uni.navigateBack({
                            delta: 1
                        })
                    } else {
                        this.$toast(ret.message);
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #fff;
    }
    .content{
        padding: 85rpx 40rpx;
    }
    .title{
        font-size: 56rpx;
        font-weight: bold;
    }
    .sub{
        font-size: 34rpx;
        color: #8b8a8a;
        padding-top: 10rpx;
        padding-bottom: 60rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 45rpx 0;
        border-bottom: 2rpx solid #e6e6e6;
        font-size: 32rpx;
    }
    .icon{
        width: 31rpx;
        height: 36rpx;
        margin-right: 15rpx;
    }
    .p-inp{
        color: #000;
    }
    .inp{
        flex: 1;
    }
    
    
    
    
    .frame {
        width: 33rpx;
        height: 33rpx;
        border-radius: 50%;
        border: 1rpx solid #cdcdcd;
        position: relative;
        margin-right: 12rpx;
        margin-top: 4rpx;
    
        /deep/ u-icon {
            transform: scale(0);
            position: absolute;
            top: -7%;
            left: -2%;
        }
    }
    
    .activeIcon {
        /deep/ u-icon {
            transform: scale(1);
        }
    }
    .tip {
        color: #0170cc;
    }

</style>
